<template>
  <div class="targetArchives">
    <header class="header">
      <el-row>
        <el-col :span="15" class="user-container">
          <!--用户头像-->
          <div class="user-icon">
            <img :src="obj_icon" class="user-icon" alt="">
          </div>
          <div class="user-label">
            <div class="flex-item">
              <!--用户名称-->
              <h3>{{displayName}}</h3>
              <!--用户类别-->
              <span>{{name}}</span>
              <el-button class="moveToGroup" type="warning" size="small" plain @click="moveDialogVisible = true">移动到分组</el-button>
            </div>
            <!--用户所拥有的标签-->
            <div class="tags-container">
              <template v-for="tag in ownerTags">
                <el-tag :key="tag" closable type="success" size="mini" @close="handleRemoveOwnerTag(tag)">{{tag}}</el-tag>
              </template>
              <el-button class="setTag-btn" size="small" plain @click="setTagsDialog_Visible=true" type="primary">设置标签</el-button>
            </div>
          </div>
        </el-col>
        <el-col :span="3" class="analysis-container">
          <!-- <div class="total">
            <span>100</span>
          </div>
          <div class="last-time">
            <span>上次分析时间:2018-01-02:12:12:01</span>
          </div> -->
        </el-col>
        <el-col :span="2" class="monitor-container text-center">
          <!-- <i class="fa el-icon-download fa-2x pointer"> </i>
          <p>导出excel</p> -->
        </el-col>
        <el-col :span="2" class="monitor-container text-center">
          <i class="fa fa-podcast fa-2x pointer" @click="saveMonitoringInstance"> </i>
          <p class="pointer" @click="saveMonitoringInstance">加入监控</p>
        </el-col>
        <el-col :span="2" class="monitor-container text-center">
          <i class="fa fa-line-chart fa-2x pointer" @click="viewObjectInfo( obj_type,rowkey, objectUri,name,displayName, obj_icon,belongGroup)"> </i>
          <p class="pointer" @click="viewObjectInfo( obj_type,rowkey, objectUri,name,displayName, obj_icon,belongGroup)">属性编辑</p>
        </el-col>
      </el-row>
    </header>
    <!--数量统计-->
    <article class="quantitative-statistics">
      <template v-for="(item,index) in socialAnalysisCountList">
        <div @click="getSocialAnalysisDetail(item.linkUri,item.displayname,item.direction)" :class="{first:index===0,last:(index===socialAnalysisCountList.length-1&&index>0)}" class=" pointer box  text-center" :key="index">
          <img :src="item.icon" alt="">
          <div>
            <h2> {{item.counts}}</h2>
            <h2> {{item.displayname}} </h2>
          </div>
        </div>
      </template>
    </article>
    <!--发帖柱状图统计-->
    <article class="posting-statistics">
      <el-row>
        <el-col :span="12" class="title">
          <span>发帖习惯统计</span>
        </el-col>
        <el-col :span="12">
          <el-menu default-active="1" class="el-menu-demo" mode="horizontal">
            <el-menu-item index="2" @click="modifyDateType('day')">近期发帖习惯</el-menu-item>
            <el-menu-item index="1" @click="modifyDateType('year')">全局发帖习惯</el-menu-item>
          </el-menu>
        </el-col>
      </el-row>
      <posting-chart v-if="postingChart_Visible" ref="postingChart" :xData="posting_xData" :seriesData="posting_seriesData"></posting-chart>
    </article>
    <!--文章列表及热词分析-->
    <article class="article-container">
      <el-row>
        <!--文章列表-->
        <el-col :span="16">
          <article-list :rowkey="rowkey" :objectUri="objectUri" :belongGroup="belongGroup"></article-list>
        </el-col>
        <!--热词图-->
        <el-col :span="8" class="wordCloud-container">
          <hotword-cloud ref="hotwordChart"></hotword-cloud>
          <sensitiveword-cloud ref="sensitivewordChart"></sensitiveword-cloud>
        </el-col>
      </el-row>
    </article>
     <!-- 移动分组弹窗 -->
    <component v-if="moveDialogVisible" :rowkey="rowkey" :objectUri="objectUri" v-bind:is="moveToGroup_dialog" v-model="moveDialogVisible"></component>
    <!-- 设置标签弹窗 -->
    <el-dialog class="setTags-dialog" title="设置标签" :visible.sync="setTagsDialog_Visible" width="30%">
      <!-- 标签组中过滤后的标签(过滤掉用户所用的的标签) -->
      <div class="search-container">
        <template v-for="tag in allTags">
          <el-tag :key="tag.id" closable type="info" @close="handleRemoveTag(tag.id)">
            <el-checkbox v-model="tag.isChecked"></el-checkbox>
            {{tag.displayname}}
          </el-tag>
        </template>
        <el-popover v-model="addTag_visible" placement="right" width="200" trigger="click">
          <el-input v-model="currentTag" size="small" placeholder="请输入标签名"></el-input>
          <el-button class="addTag-btn" @click.native="addTags" type="primary" size="small">确定</el-button>
          <el-button slot="reference" @click="addTag_visible=!addTag_visible" size="small" plain type="primary" class="el-icon-plus">添加标签</el-button>
        </el-popover>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="handleCloseTagsDialog">取 消</el-button>
        <el-button type="primary" @click="markTags">确 定</el-button>
      </span>
    </el-dialog>
    <!---->
    <el-dialog class="relation-instanceList" :title="intanceListDialog_title" :visible.sync="intanceListDialog_Visible" width="50%">
      <div v-if="instanceList.length===0" style="text-align:center">暂无数据 </div>
      <!--文章列表及热词分析-->
      <div class="article-container">
        <template v-for=" (info,index) in instanceList">
          <div class="article-info" :key="index">
            <div class="user-container">
              <div class="user-icon pointer" @click.stop="viewIntanceInfo(info.objectType,info.rowkey,info.objectUri,info.name,info.showName,info.iconUrl,info.belongGroup)">
                <img :src="info.iconUrl" class="user-icon" alt="">
              </div>
              <div class="user-label pointer" @click.stop="viewIntanceInfo(info.objectType,info.rowkey,info.objectUri,info.name,info.showName,info.iconUrl,info.belongGroup)">
                <div class="flex-info">
                  <h4  @click.stop="viewIntanceInfo(info.objectType,info.rowkey,info.objectUri,info.name,info.showName,info.iconUrl,info.belongGroup)">{{info.showName?info.showName:info.displayName}}</h4>
                  <span>@{{info.name}}</span>
                  <span class="postTime">{{info.postTime}}</span>
                </div>
              </div>
            </div>
            <div class="content">
              个人简介： {{info.description}}
            </div>
          </div>
        </template>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import archives from './index'
export default {
    ...archives
}
</script>
<style lang="less" scoped>
@import url("./index.less");
</style>
<style lang="less">
.setTags-dialog {
  .tags-container {
    margin-top: 5px;
    .tag {
      border: 1px solid red;
      padding: 5px 10px;
      margin: 4px 5px;
      font-size: 12px;
      border-radius: 5px;
      color: #409eff;
      border: 1px solid rgba(64, 158, 255, 0.2);
      margin: 5px 10px;
      display: inline-block;
      &:hover .x {
        opacity: 1;
      }
      .el-checkbox {
        margin-right: 5px;
      }
      .x {
        font-size: 14px;
        color: #999;
        vertical-align: top;
        opacity: 0;
        margin-top: 25px;
      }
    }
  }
  .search-container {
    .el-tag {
      margin: 0 20px 15px 0;
      background-color: #fff;
      color: #606266;
    }
  }
}
.addTag-btn {
  margin-top: 10px;
}
</style>
